<template>
    <div class="login-box">
        <el-form
            ref="loginForm"
            :model="loginWorker"
            status-icon
            :rules="loginRules"
            label-width="80px"
            class="demo-ruleForm"
        >
            <h2>浩奇公司后台管理系统</h2>
            <el-form-item
                label="账号："
                prop="account"
            >
                <el-input
                    v-model="loginWorker.account"
                    autocomplete="off"
                />
            </el-form-item>

            <el-form-item
                label="密码："
                prop="password"
            >
                <el-input
                    v-model="loginWorker.password"
                    type="password"
                    autocomplete="off"
                />
            </el-form-item>

            <el-form-item
                label="职位"
                prop="roleId"
            >
                <el-select
                    v-model="loginWorker.roleId"
                    placeholder=""
                >
                    <el-option
                        label="经理"
                        value=0
                    ></el-option>
                    <el-option
                        label="执行人"
                        value=1
                    ></el-option>
                    <el-option
                        label="现场工作人员"
                        value=2
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button
                    class="loginBtn"
                    type="primary"
                    @click="handleLogin('loginForm')"
                >登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script>
import { getCurrentInstance, inject, ref } from "vue";
import { loginWorker, loginRules } from "@/utils/worker_LoginValidators"
import { useRouter } from "vue-router";
export default {
    setup() {
        const { ctx } = getCurrentInstance();
        const axios = inject('axios')
        const router = useRouter();

        const handleLogin = (formName) => {
            ctx.$refs[formName].validate((valid) => {
                if (valid) {
                    const { account, password, roleId } = loginWorker.value;
                    var role_string = "";
                    if (String(roleId) === "0") {
                        role_string = "经理";
                    } else if (String(roleId) === "1") {
                        role_string = "执行人";
                    } else {
                        role_string = "现场工作人员"
                    }
                    axios.get("/api/worker/login",
                        {
                            params: {
                                account: account,
                                password: password,
                                roleId: roleId,
                                role: role_string,
                            }

                        }).then((res) => {
                            if (res.status === 200 && res.data.success === true) {
                                // 路由跳转
                                if (String(roleId) === "0") {
                                    router.push("/manage_Home");
                                } else if (String(roleId) === "1") {
                                    router.push("/staff_Home");
                                } else {
                                    router.push("/onsite_Home");
                                }
                            }
                            else {
                                console.log(role_string);
                                alert("登录失败!");
                                return false;
                            }
                        })
                } else {
                    alert("登录失败!");
                    return false;
                }
            });
        };

        return { loginWorker, loginRules, handleLogin };
    },
};
</script>
  
<style lang='scss' scoped>
.login-box {
    width: 100%;
    height: 100%;
    background: url("../assets/img/log.svg");
    padding: 1px;
    text-align: center;

    .demo-ruleForm {
        width: 500px;
        margin: 270px auto;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 40px;
        border-radius: 20px;
    }

    .loginBtn {
        width: 48%;
    }

    h2 {
        margin-bottom: 10px;
    }
}
</style>